<template>
  <div id="app">
    <div class="wrap">
      <!-- 播放主体 -->
      <div class="play_wrap" id="player">
        <!-- 导航条 -->
        <div class="nav-1">
          <div class="m-top">
            <div class="logo"></div>
            <ul class="m-nav j-tflag">
              <li class="fst">
                <span>
                  <a hidefocus="true" href="/#" data-module="discover" class="z-slt">
                    发现音乐
                    <sub class="cor">&nbsp;</sub>
                  </a>
                </span>
              </li>
              <li>
                <span>
                  <a
                    data-action="bilog"
                    data-log-action="page"
                    data-log-json="{&quot;type&quot;:&quot;my&quot;}"
                    hidefocus="true"
                    href="/my/"
                    data-module="my"
                  >
                    我的音乐
                    <sub class="cor">&nbsp;</sub>
                  </a>
                </span>
              </li>
              <li>
                <span>
                  <a hidefocus="true" href="/friend" data-module="friend">
                    朋友
                    <sub class="cor">&nbsp;</sub>
                    <i class="dot j-t" style="display:none;"></i>
                  </a>
                </span>
              </li>
              <li>
                <span>
                  <a hidefocus="true" href="/store/product" target="_blank" data-module="store">商城</a>
                </span>
              </li>
              <li>
                <span>
                  <a
                    hidefocus="true"
                    href="/nmusician/web/recruit"
                    target="_blank"
                    data-module="musician"
                  >音乐人</a>
                </span>
              </li>
              <li class="lst">
                <span>
                  <a
                    id="topbar-download-link"
                    data-action="bilog"
                    data-log-action="page"
                    data-log-json="{&quot;type&quot;:&quot;downloadapp&quot;,&quot;source&quot;:&quot;tab&quot;}"
                    hidefocus="true"
                    href="/download"
                    data-module="download"
                  >
                    下载客户端
                    <sub class="cor">&nbsp;</sub>
                  </a>
                </span>
                <sup class="hot">&nbsp;</sup>
              </li>
            </ul>
            <div class="search_bar">
              <!-- <img src="./assets/img" alt /> -->
              <!-- 搜索歌曲 -->
              <input
                type="text"
                autocomplete="off"
                v-model="query"
                @keyup.enter="searchMusic"
                placeholder="请输入音乐"
              />
              <img src="./assets/img/search.png" alt class="search-icon" />
            </div>
          </div>
        </div>
        <!-- 二级导航  -->
        <div class="m-subnav j-tflag">
          <div class="f-pr">
            <ul class="nav-2">
              <li>
                <a hidefocus="true" data-module="discover" href="/discover" class="z-slt">推荐</a>
              </li>
              <li>
                <a hidefocus="true" data-module="toplist" href="/discover/toplist">排行榜</a>
              </li>
              <li>
                <a hidefocus="true" data-module="playlist" href="/discover/playlist">
                  <span class="f-pr" style="padding: 0 15px 0 11px;">
                    歌单
                    <span
                      class="f-pa f-r-white-icon"
                      style="display:inline-block;width:8px;height:8px;top:2px;background-size:cover;"
                    ></span>
                  </span>
                </a>
              </li>
              <li>
                <a hidefocus="true" data-module="djradio" href="/discover/djradio">主播电台</a>
              </li>
              <li>
                <a hidefocus="true" data-module="artist" href="/discover/artist">歌手</a>
              </li>
              <li>
                <a hidefocus="true" data-module="album" href="/discover/album">新碟上架</a>
              </li>
            </ul>
          </div>
        </div>

        <!-- banner -->
        <div class="banner">
          <img src="./assets/img/banner.png" alt />
        </div>
        <div class="center_con" :style="{background:backgroundCenter}">
          <!--搜索歌曲列表 -->
          <div class="itwangyang" v-show="isShowSearch">
            <h1>👉 请您搜索您想要的歌曲</h1>

            <input
              type="text"
              autocomplete="off"
              v-model="query"
              @keyup.enter="searchMusic"
              placeholder="请输入音乐"
            />
          </div>

          <div class="song_wrapper">
            <div class="song_list" :style="{width:widthLength}">
              <h3 class="title" v-show="isShowTitle">搜索的歌曲</h3>
              <ol>
                <li v-for="(item,index) in musicList" :key="item.id">
                  <span class="index">{{index+1}}.</span>
                  <!-- <img class="list-img" :src="item.album.artist.img1v1Url" alt /> -->
                  <a href="javascript:;" @click="playMusic(item.id)">
                    <span class="song-name">{{ item.name }}</span>

                    <span class="sing-name">{{item.artists[0].name}}</span>
                  </a>
                </li>
              </ol>
            </div>
            <!-- <div class="player_con" :class="{ playing: isPlaying }">
              <img :src="musicCover" class="cover autoRotate" alt />
            </div>-->
            <!-- 评论容器 -->
            <div class="comment_wrapper">
              <h3 class="title" v-show="isClick">热门留言</h3>
              <div class="comment_list">
                <dl v-for="item in hotComments" :key="item.time">
                  <dt>
                    <img class="user-img" :src="item.user.avatarUrl" alt />
                    <span class="name">{{ item.user.nickname }}:</span>
                  </dt>
                  <dd class="datail">{{ item.content }}</dd>
                  <p>
                    <span>{{item.time|dataFormat}}</span>
                  </p>
                </dl>
              </div>
            </div>
          </div>
          <div class="audio_con">
            <!--  @play="play"
            @pause="pause"-->
            <audio ref="audio" :src="musicUrl" controls @play="play" @pause="pause" autoplay></audio>
          </div>
          <!-- <div class="video_con" v-show="isShow" style="display:none">
            <video :src="mvUrl" controls="controls"></video>
            <div class="mask" @click="hide"></div>
          </div>-->
        </div>

        <!-- footer -->
        <footer>
          <div class="g-ft">
            <div class="m-ft">
              <div class="f-cb">
                <div class="copy">
                  <p class="link" id="music-link">
                    <a
                      href="//st.music.163.com/official-terms/service"
                      target="_blank"
                      class="item s-fc4"
                    >服务条款</a>
                    <span class="line">|</span>
                    <a
                      href="//st.music.163.com/official-terms/privacy"
                      target="_blank"
                      class="item s-fc4"
                    >隐私政策</a>
                    <span class="line">|</span>
                    <a
                      href="//st.music.163.com/official-terms/children"
                      target="_blank"
                      class="item s-fc4"
                    >儿童隐私政策</a>
                    <span class="line">|</span>
                    <a
                      href="//music.163.com/st/staticdeal/complaints.html"
                      target="_blank"
                      class="item s-fc4"
                    >版权投诉指引</a>
                    <span class="line">|</span>
                    <a
                      id="g_feedback"
                      href="#"
                      class="item s-fc4"
                      onclick="nm.x.feedback();return false;"
                      hidefocus="true"
                    >意见反馈</a>
                    <span class="line">|</span>
                    <a class="s-fc4"></a>
                  </p>
                  <p class="right s-fc3">
                    <span class="sep span">网易公司版权所有©1997-2020</span>
                    <span class="span">杭州乐读科技有限公司运营：</span>
                    <a
                      href="https://p1.music.126.net/Mos9LTpl6kYt6YTutA6gjg==/109951164248627501.png"
                      target="_blank"
                      class="alink s-fc3"
                    >浙网文[2018]3506-263号</a>
                  </p>
                  <p class="contact s-fc3">
                    <span class="sep span">违法和不良信息举报电话：0571-89853516</span>
                    <span class="span">举报邮箱：</span>
                    <a class="alink" href="mailto:ncm5990@163.com">ncm5990@163.com</a>
                  </p>
                  <p class="right s-fc3">
                    <span class="sep span">粤B2-20090191-18</span>
                    <a
                      href="http://www.beian.miit.gov.cn/publish/query/indexFirst.action"
                      rel="noopener noreferrer"
                      target="_blank"
                      class="alink s-fc3"
                    >工业和信息化部备案管理系统网站</a>
                  </p>
                </div>
                <ul class="footer-bg">
                  <img src="./assets/img/footer-bg.png" alt />
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
import axios from "axios";
import { reactive, toRefs } from "@vue/composition-api";
export default {
  //vue3.0核心方法
  // setup(){}，特点：
  // 1.自动执行---》在created方法之前调用执行
  // 2.作用，为当前页面提供数据或者方法
  // 3.提供数据方法--合并到组件的data中
  // 4.形参，props,context
  // 5.返回值 return{数据的名字和值}
  // setup(props, context) {},
  setup() {
    // 写响应式数据,reacive方法提供你那个的数据是响应式的 数据，相当于data
    const state = reactive({
      query: "",
      musicList: [],
      musicUrl: "",
      musicCover: "",
      hotComments: [],
      isPlaying: false,
      isShowTitle: false,
      isClick: false,
      widthLength: "80%",
      isShowSearch: true,
      backgroundCenter: "#f5f5f5"
    }); // state-->{query:''}

    // 方法
    // 搜索音乐
    const searchMusic = async () => {
      // const {data}  = await axios.get(`https://autumnfish.cn/song/url?id=${musicId}`)
      const { data } = await axios.get(
        `https://autumnfish.cn/search?keywords=${state.query}`
      );
      state.musicList = data.result.songs;
      state.isShowTitle = true;
      state.isShowSearch = false;
      state.backgroundCenter = "";
      console.log(data);
      console.log(data.result.songs);
    };

    // 播放音乐
    const playMusic = async musicId => {
      state.isClick = true;
      // 音乐播放
      const { data } = await axios.get(
        "https://autumnfish.cn/song/url?id=" + musicId
      );
      state.musicUrl = data.data[0].url;

      state.widthLength = "40%";

      console.log(data);

      // 封面展示
      // https://autumnfish.cn/song/detail?ids=347230
      const { data: datadetail } = await axios.get(
        `https://autumnfish.cn/song/detail?ids=${musicId}`
      );
      state.musicCover = datadetail.songs[0].al.picUrl;
      console.log(datadetail.songs[0].al.picUrl);

      // 评论
      const { data: hotComments } = await axios.get(
        `https://autumnfish.cn/comment/hot?type=0&id=${musicId}`
      );
      state.hotComments = hotComments.hotComments;
      console.log(state.hotComments);

      // const { data2 } = await axios.get(
      //   `https://autumnfish.cn/comment/music?id=${musicId}`
      // );
      // // state.hotComments = dataComment.hotComments;
      // console.log(data2);
    };

    // 播放or stopPropagation();
    const play = () => {
      state.isPlaying = true;
    };

    const pause = () => {
      state.isPlaying = false;
    };

    const methods = { searchMusic, playMusic, play, pause };
    return {
      // query: state.query,
      // 装换数据toRefs()
      // ...state,
      ...toRefs(state),
      ...methods
    };
  }
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.wrap {
  width: 100%;
  height: 100vh;
  // background: #f5f5f5;
  .nav-1 {
    background: rgb(14, 14, 14);
  }
  .m-top {
    width: 1280px;
    margin: 0 auto;
    position: relative;
    // z-index: 1000;
    height: 70px;
    box-sizing: border-box;
    border-bottom: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      width: 200px;
      height: 40px;
      background: url("../src/assets/img/logo.png") no-repeat;
      background-size: contain;
    }
    .m-nav {
      display: flex;
      li {
        margin-left: 40px;
        a {
          // padding: 0 19px;
          display: flex;
          text-align: center;
          line-height: 70px;
          color: #ccc;
        }
      }
    }
    .search_bar {
      position: relative;
      input {
        width: 158px;
        height: 32px;
        background-color: #fff;
        border-radius: 32px;
        outline: none;
        padding-left: 30px;
        border: none;
      }
      input::-webkit-input-placeholder {
        /* placeholder颜色  */
        color: #666;
        /* placeholder字体大小  */
        font-size: 14px;
        /* placeholder位置  */
        text-align: left;
      }
      .search-icon {
        position: absolute;
        left: 6px;
        top: 4px;
      }
    }
  }
  // 二级导航
  .m-subnav {
    height: 35px;
    box-sizing: border-box;
    background-color: #c20c0c;
    border-bottom: 1px solid #a40011;
    .nav-2 {
      display: flex;
      height: 35px;
      align-items: center;
      justify-content: center;
      li {
        margin-right: 30px;
        display: flex;
        a {
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }

  // banner
  .banner {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 1680px;
    height: 420px;
    background-image: linear-gradient(
      to right,
      #996666,
      #993333,
      #990033,
      #cc0033
    );
    img {
      width: 1080px;
    }
  }

  .center_con {
    // background: #f5f5f5;
    .itwangyang {
      height: 40vh;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      h1 {
        color: #ccc;
      }
      input {
        width: 320px;
        height: 47px;
        margin: 20px 0;
        padding-left: 20px;
        background: #fff;
        border: none;
        outline: none;
        font-size: 18px;
      }
    }
  }
  // 播放歌曲
  .song_wrapper {
    display: flex;
    justify-content: space-evenly;
    .song_list {
      // width: 300px;
      // width: 46%;

      li {
        display: flex;
        height: 40px;
        align-items: center;
        padding: 0 30px;
        border: 1px solid #fff;
        span.index {
          margin-right: 20px;
          display: inline-block;
          width: 10px;
        }
        a {
          color: #000;
          display: inline-block;
          // width: 246px;

          overflow: hidden;
          .song-name {
            display: inline-block;
            width: 450px;
          }
          .sing-name {
          }
        }
        .list-img {
          width: 30px;
        }
      }
      li:nth-child(odd) {
        background: #f7f7f7;
        border-color: #f7f7f7;
        border: 1px solid #fff;
      }
      li:hover:nth-child(odd),
      li:hover:nth-child(even) {
        border: 1px solid #e1e1e1;
        background: #f2f2f2;
      }
    }
    // 封面展示
    .player_con {
      img {
        width: 400px;
        height: 400px;
        border-radius: 200px;
      }
    }
  }

  .title {
    margin: 20px 0 20px 0;
  }

  // 评论
  .comment_wrapper {
    dl {
      display: flex;
      margin: 10px 0px 10px 0;
      justify-content: space-between;
      margin-right: 15px;
    }
    p {
      span {
        color: #666;
        font-size: 12px;
      }
    }
    dt {
      display: flex;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 200px;
      span.name {
        color: blue;
        margin: 0px 11px 0 11px;
        display: inline-block;
      }
      img.user-img {
        width: 70px;
        height: 70px;
        // border-radius: 15px;
      }
    }
    dd.datail {
      width: 500px;
    }
  }

  // 播放器
  .audio_con {
    background: #000;

    audio {
      width: 100%;
      background: #000;
      background-position: 0 0;
      background-repeat: repeat-x;
      -webkit-border-radius: 0 !important;
      position: fixed;
      bottom: -70px;
      padding: 15px 0;
      outline: none;
    }
  }
  audio:hover {
    bottom: 0px;
  }

  // footer
  footer {
    height: 172px;
    padding: 20px 0;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
    .f-cb {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .m-ft {
      width: 1080px;
      margin: 0 auto;
      .copy {
        float: left;
        width: 520px;
        padding-top: 15px;
        line-height: 24px;
        p {
          a {
            color: #666;
          }
          .line {
            margin: 0 10px;
          }
        }
        .s-fc3:hover {
          color: #666;
        }
      }
    }
    .footer-bg {
      img {
        width: 490px;
      }
    }
  }
}
</style>
